{extend name="main"}
{block name="style"}
<style type="text/css">
	.job-fair-header{
		min-height: 400px;
		background-image: url(__TEMPLATE_STATIC__/job_fair_bg.png);
		background-repeat: no-repeat;
		background-position-x:center;
		background-size: 100% 400px;
		background-color: #F8F8F8;
		padding-top: 190px;
	}
  .el-select .el-input {
    width: 120px;
  }
  .icon-jobfair-status{
  	position: absolute;
  	z-index: 1;
  	background: linear-gradient(-30deg, #FF939D, #FF3131);
	border-radius: 0px 13px 13px 0px;
	color: #FFFFFF;
	font-size: .8rem;
	top: 0;
	padding: 0 6px;
  }
  .icon-jobfair-status.status-info{
  	background: linear-gradient(-30deg, #C1C1C1, #999A9B);
  }
</style>
{/block}
{block name="header"}
{include file="module/top_nav" container="container-xl"/}
{include file="module/header_concise"/}
{/block}
{block name="body"}
<div class="job-fair-header">
	<h1 class="text-center text-white pb-5">招聘会专栏</h1>
	<div class="container-xl pt-2">
		<div class="text-center text-dark pb-5 search mb-3">
			<el-form @submit.native.prevent="sendSearch">
				<el-input placeholder="会计/财务/人力/客服/设计…" v-model="search.key" class="w-75 input-with-select shadow el-input__inner-left-none"
				clearable>
					<el-select slot="prepend" v-model="search.city" filterable clearable default-first-option placeholder="区域" style="">
						<el-option-group
					      v-for="group in city_list"
					      :key="group.title"
					      :label="group.title">
					      <el-option
					        v-for="item in group.data"
					        :key="item.id"
					        :label="item.title"
					        :value="item.id">
					      </el-option>
					    </el-option-group>
					</el-select>
				    <el-button native-type="submit" slot="append">搜索</el-button>
				</el-input>
			</el-form>
		</div>
		{xycms:jobfair name="jobfair"}
		<div class="row" style="margin-left: -0.5rem;margin-right: -0.5rem;">
		{volist name="jobfair" id="v"}
		<div class="col-4 mb-3 px-2">
			<div class="bg-white p-3">
				<div class="position-relative">
					<a href="/job-fair/detail/{$v.id}.html"><img src="{$v.thumb}" alt="" width="100%" height="120"></a>
					{switch v.status}
					    {case 1 }
							<div class="icon-jobfair-status">报名中</div>
					    {/case}
					    {case 2}
							<div class="icon-jobfair-status">进行中</div>
					    {/case}
					    {case 3}
							<div class="icon-jobfair-status status-info">已结束</div>
					    {/case}
					    {default /}
							<div class="icon-jobfair-status status-info">未开始</div>
					{/switch}
				</div>
				<div class="pt-3">
					<a href="/job-fair/detail/{$v.id}.html" class="h6 d-block text-truncate text-dark font-weight-600"
					target="_blank">{$v.title}</a>
					<div class="flex flex-ceter text-grey">
						<div class="small">{$v.start_time}</div>
						<div class="px-1">-</div>
						<div class="small">{$v.end_time}</div>
						<div class="flex-1"></div>
						<a href="/job-fair/detail/{$v.id}.html" class="small text-grey"
						target="_blank">查看详情&gt;</a>
					</div>
				</div>
			</div>
		</div>
		{/volist}
		</div>
		<div class="text-center py-3">
			{$jobfair->render()|raw}
		</div>
		{else/}
		<div class="text-secondary text-center py-5">暂无招聘会</div>
		{/xycms:jobfair}
	</div>
</div>
{/block}
{block name="footer"}
{include file="module/footer"/}
{include file="module/login"/}
{/block}
{block name="script"}
<script type="text/javascript">
	var city_list={xycms:citylist serialize="json"/};
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			loginTabs:XYBase.loginTabs,
			userInfo:UserInfo,
			feedback:XYBase.feedback,
			city_list:city_list,
			search:{
				city:{notempty name=":request()->get('city')"}{:htmlentities(request()->get('city'))}{else/}''{/notempty},
				key:'{notempty name=":request()->get('title')"}{:htmlentities(request()->get('title'))}{/notempty}'
			}
		},
		watch:{
		    view:XYBase.viewWatch,
		    loginTabs:XYBase.loginTabsWatch,
		},
		created(){
			XYBase.created(this);
		},
		methods:XYBase.methods({
			sendSearch(){
				window.location.href='?title='+this.search.key+'&city='+this.search.city;
			}
		})
	});
</script>
{/block}